import React from 'react'
import { InputNumber, Tree, Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Radio, Modal, Message } from 'antd';
import api from '../../../api/communityManage';
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const { TextArea } = Input;
import PanelBox from '../../../components/PanelBox';
import AreaCascader from '../../Cascader/AreaCascader';
import CommunityCascader from '../../Cascader/CommunityCascader';
import MapMarker from '../../AMap/SelectMarker'

import './index.less'

class InfoFormClass extends React.Component {
  main = {
    props: {
      clear: this.props.clear,
      onSubmit: (values) => {
        this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 0,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        if (values.coordinateAdd && values.coordinateAdd.length > 0) {
          values.longitude = values.coordinateAdd[0];
          values.latitude = values.coordinateAdd[1];
        }
        if (values.coordinateEdit && values.coordinateEdit.length > 0) {
          values.longitude = values.coordinateEdit[0];
          values.latitude = values.coordinateEdit[1];
        }
        values.areaId = values.areas[values.areas.length - 1];
        if (values.id) {
          api.put('/community/info/edit', values).then(res => {
            this.main.props.onSubmit(res);
          });
        } else {
          api.post('/community/info/save', values).then(res => {
            this.main.props.onSubmit(res);
          });
        }
      });
    },
    selectChange: value => {
      let main = this.state.main;
      if (value == 1) {
        main.showDay = "block";
      } else {
        main.showDay = "none";
      }
      this.setState({
        main
      });
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        showDay: props.record && props.record.isCostRestrict == 1 ? 'block' : 'none',
        record: props.record,
        loading: false
      }
    }
  }

  componentDidMount = () => {
    //this.main.setMainState("loading",true);
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setMainState("record", nextProps.record);
      if (nextProps.record.isCostRestrict == 1) {
        this.main.setMainState("showDay", "block");
      } else {
        this.main.setMainState("showDay", "none");
      }
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form onSubmit={this.main.submit}>
          {getFieldDecorator('id', {
            initialValue: this.state.main.record.id
          })(
            <Input type="hidden" />
            )}
          {getFieldDecorator('officeId', {
            initialValue: this.state.main.record.officeId
          })(
            <Input type="hidden" />
            )}
          <FormItem
            {...formItemLayout}
            label="名称"
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '小区名称必须填写' }],
              initialValue: this.state.main.record.name
            })(
              <Input />
              )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="小区电话"
            hasFeedback
          >
            {getFieldDecorator('phone', {
              initialValue: this.state.main.record.phone
            })(
              <Input/>
              )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="人脸社区ID"
            hasFeedback
          >
            {getFieldDecorator('relateId', {
              initialValue: this.state.main.record.relateId
            })(
              <Input />
              )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="不交物业费禁用人脸"
          >
            {getFieldDecorator('isCostRestrict', {
              rules: [{ required: true, message: '不交物业费禁用人脸必须选择' }],
              initialValue: this.state.main.record.isCostRestrict
            })(
              <Select onChange={this.main.selectChange}>
                <Option value="0">关闭</Option>
                <Option value="1">开启</Option>
              </Select>
              )}
          </FormItem>

          <FormItem
            style={{ display: this.state.main.showDay }}
            {...formItemLayout}
            label="物管费天数限制"
            hasFeedback
          >
            {getFieldDecorator('costRestrictDay', {
              initialValue: this.state.main.record.costRestrictDay || 0
            })(
              <Input />
              )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="小区所在区域"
            hasFeedback
          >
            {getFieldDecorator('areas', {
              rules: [{ type: "array", required: true, message: '区域必须选择' }],
              initialValue: this.state.main.record.areaId
            })(
              <AreaCascader maxLevel={3} changeOnSelect={false} />
              )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="小区详细地址"
            hasFeedback
          >
            {getFieldDecorator('address', {
              initialValue: this.state.main.record.address
            })(
              <Input />
              )}
          </FormItem>

          <FormItem
            style={(this.state.main.record.longitude != undefined && this.state.main.record.latitude != undefined) ? {} : { display: "none" }}
            {...formItemLayout}
            label="小区地图位置"
            hasFeedback
          >
            {getFieldDecorator('coordinateEdit', {
              rules: [{ type: "array", required: (this.state.main.record.longitude != undefined && this.state.main.record.latitude != undefined), message: '小区地图位置必须选择' }],
              initialValue: (this.state.main.record.longitude != undefined && this.state.main.record.latitude != undefined) ? [this.state.main.record.longitude, this.state.main.record.latitude] : [106.504962, 29.533155]
            })(
              <MapMarker />
              )}
          </FormItem>

          <FormItem
            style={(this.state.main.record.longitude != undefined && this.state.main.record.latitude != undefined) ? { display: "none" } : {}}
            {...formItemLayout}
            label="小区地图位置"
            hasFeedback
          >
            {getFieldDecorator('coordinateAdd', {
              rules: [{ type: "array", required: (this.state.main.record.longitude == undefined && this.state.main.record.latitude == undefined), message: '小区地图位置必须选择' }],
            })(
              <MapMarker />
              )}
          </FormItem>

          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form >
      </div >
    );
  }
}
class RoomFormClass extends React.Component {

  main = {
    props: {
      clear: this.props.clear, //是否清空,true清空,false不清空
      onSubmit: (values) => {
        this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 0,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        if (values.id) {
          api.put('/community/room/edit', values).then(res => {
            this.main.props.onSubmit(res);
          });
        } else {
          api.post('/community/room/save', values).then(res => {
            this.main.props.onSubmit(res);
          });
        }
      });
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        record: props.record,
        loading: false
      }
    }
  }

  componentDidMount = () => {
    this.setState({
      loading: true
    });
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setMainState("record", nextProps.record);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form onSubmit={this.main.submit}>
          {getFieldDecorator('id', {
            initialValue: this.state.main.record.id
          })(
            <Input type="hidden" />
            )}
          {getFieldDecorator('floorId', {
            initialValue: this.state.main.record.floorId
          })(
            <Input type="hidden" />
            )}

          <FormItem
            {...formItemLayout}
            label="房间序列"
            hasFeedback
          >
            <Tooltip placement="topLeft" title="房间的真实编号(例如1-5,则此值应为5)">
              {getFieldDecorator('sort', {
                rules: [{ required: true, message: '房间序列不能为空' },
                { pattern: /^\d+$/, message: '房间序列只能是正整数' }],
                initialValue: this.state.main.record.sort || ""
              })(
                <Input type="number" />
                )}
            </Tooltip>
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="房间名称"
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '房间名称不能为空' }],
              initialValue: this.state.main.record.name || ""
            })(
              <Input />
              )}
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="房间每月费用"
            hasFeedback
          >
            {getFieldDecorator('monthCost', {
              rules: [{ required: true, message: '房间每月费用不能为空' },
              { pattern: /^\d+(\.\d{1,2})?$/, message: '房间每月费用只能是大于0的数字' }],
              initialValue: this.state.main.record.monthCost || 0
            })(
              <Input type="number" />
              )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="房间被启用"
          >
            <Tooltip placement="topLeft" title="如果房间被禁用，会禁用业主人脸开门和IC卡开门的权限">
              <Row>
                {getFieldDecorator('state', {
                  rules: [{ required: true, message: '房间状态必须选择' }],
                  initialValue: this.state.main.record.state ? this.state.main.record.state + "" : undefined
                })(
                  <Select>
                    <Option value="1">是</Option>
                    <Option value="0">否</Option>
                  </Select>
                  )}
              </Row>
            </Tooltip>
          </FormItem>
          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
class FloorFormClass extends React.Component {
  main = {
    props: {
      clear: this.props.clear,
      onSubmit: (values) => {
        this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 0,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        if (values.id) {
          api.put('/community/floor/edit', values).then(res => {
            this.main.props.onSubmit(res);
          });
        } else {
          api.post('/community/floor/save', values).then(res => {
            this.main.props.onSubmit(res);
          });
        }
      });
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        record: props.record,
        loading: false
      }
    }
  }

  componentDidMount = () => {
    this.setState({
      loading: true
    });
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setMainState("record", nextProps.record);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form onSubmit={this.main.submit}>
          {getFieldDecorator('id', {
            initialValue: this.state.main.record.id
          })(
            <Input type="hidden" />
            )}
          {getFieldDecorator('buildId', {
            initialValue: this.state.main.record.buildId
          })(
            <Input type="hidden" />
            )}
          <FormItem
            {...formItemLayout}
            label="楼层序列"
            hasFeedback
          >
            <Tooltip placement="topLeft" title="楼层的真实编号(例如名称是5楼或者5层,则此值应为5)">
              {getFieldDecorator('sort', {
                rules: [{ required: true, message: '楼层序列不能为空' },
                { pattern: /^\-?\d+$/, message: '楼层序列只能是整数' }],
                initialValue: this.state.main.record.sort || ""
              })(
                <Input type="number" />
                )}
            </Tooltip>
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="名称"
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '楼层名称必须填写' }],
              initialValue: this.state.main.record.name
            })(
              <Input />
              )}
          </FormItem>

          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
class BuildFormClass extends React.Component {
  main = {
    props: {
      clear: this.props.clear,
      onSubmit: (values) => {
        this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 0,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        if (values.id) {
          api.put('/community/build/edit', values).then(res => {
            this.main.props.onSubmit(res);
          });
        } else {
          api.post('/community/build/save', values).then(res => {
            this.main.props.onSubmit(res);
          });
        }
      });
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        record: props.record,
        loading: false
      }
    }
  }

  componentDidMount = () => {
    this.setState({
      loading: true
    });
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setMainState("record", nextProps.record);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form onSubmit={this.main.submit}>
          {getFieldDecorator('id', {
            initialValue: this.state.main.record.id
          })(
            <Input type="hidden" />
            )}
          {getFieldDecorator('infoId', {
            initialValue: this.state.main.record.infoId
          })(
            <Input type="hidden" />
            )}
          <FormItem
            {...formItemLayout}
            label="大楼序列"
            hasFeedback
          >
            <Tooltip placement="topLeft" title="大楼的真实编号(例如名称是3号楼或者3栋或者C苑,则此值应为3)">
              {getFieldDecorator('sort', {
                rules: [{ required: true, message: '大楼序列不能为空' },
                { pattern: /^\d+$/, message: '大楼序列只能是正整数' }],
                initialValue: this.state.main.record.sort || ""
              })(
                <Input type="number" />
                )}
            </Tooltip>
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="名称"
            hasFeedback
          >
            {getFieldDecorator('name', {
              rules: [{ required: true, message: '大楼名称必须填写' }],
              initialValue: this.state.main.record.name
            })(
              <Input />
              )}
          </FormItem>

          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
class QuickFormClass extends React.Component {
  main = {
    props: {
      clear: this.props.clear,
      onSubmit: (values) => {
        this.props.onSubmit && this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel && this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 6,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        //调用快速创建接口
        api.post('/community/quick/save', values).then(res => {
          this.main.props.onSubmit(res);
        });
      });
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        record: props.record,
        loading: false
      }
    }
  }

  componentDidMount = () => {
    this.setState({
      loading: true
    });
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setMainState("record", nextProps.record);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form className="form" onSubmit={this.main.submit}>
          {getFieldDecorator('buildId', {
            initialValue: this.state.main.record.buildId
          })(
            <Input type="hidden" />
            )}
          <FormItem
            {...formItemLayout}
            label="新增大楼楼层数"
            hasFeedback
          >
            <Tooltip placement="topLeft" title="在已有楼层的最大楼层序列号往上加，例如：现在一大楼已经存在5层，楼层序列号最大为5，如果此输入框填入2，则在会添加6层和7层。">
              {getFieldDecorator('floorNum', {
                rules: [{ required: true, message: '楼层数不能为空' },
                { pattern: /^\d+$/, message: '楼层数只能是正整数' }],
              })(
                <InputNumber className="inputNumber" min={1} max={200} placeholder="需要添加的楼层数" />
                )}
            </Tooltip>
          </FormItem>

          <FormItem
            {...formItemLayout}
            label="每层房间数"
            hasFeedback
          >
            {getFieldDecorator('houseNum', {
              rules: [{ required: true, message: '房间数不能为空' },
              { pattern: /^\d+$/, message: '房间数只能是正整数' }],
            })(
              <InputNumber className="inputNumber" min={1} max={30} placeholder="需要添加的房间数" />
              )}
          </FormItem>


          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}
class DelICFormClass extends React.Component {
  main = {
    props: {
      clear: this.props.clear,
      onSubmit: (values) => {
        this.props.onSubmit(values);
      },
      onCancel: () => {
        this.props.onCancel();
      },
    },
    setMainState: (key, value) => {
      let main = this.state.main;
      main[key] = value;
      this.setState({
        main
      });
    },
    constants: {
      buttonLayout: {
        wrapperCol: {
          xs: {
            span: 14,
            offset: 0,
          },
          sm: {
            span: 14,
            offset: 6,
          }
        }
      },
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 }
      }
    },
    submit: e => {
      e.preventDefault();
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (err) {
          return false;
        }
        if (values.id) {
          api.put('/community/build/edit', values).then(res => {
            this.main.props.onSubmit(res);
          });
        } else {
          api.post('/community/build/save', values).then(res => {
            this.main.props.onSubmit(res);
          });
        }
      });
    },
  }

  constructor(props) {
    super(props);
    this.state = {
      main: {
        record: {},
        loading: false
      }
    }
  }

  componentDidMount = () => {
    this.setState({
      loading: true
    });
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.clear && nextProps.clear != this.props.clear) {
      this.props.form.resetFields();
    }
    if (nextProps.record != this.props.record) {
      this.main.setState("record", nextProps.record);
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.main.constants.formItemLayout;
    const tailFormItemLayout = this.main.constants.buttonLayout;
    return (
      <div>
        <Form onSubmit={this.main.submit}>
          <FormItem
            {...formItemLayout}
            label="IC卡编号"
            hasFeedback
          >
            {getFieldDecorator('num', {
              rules: [{ required: true, message: 'IC卡编号不能为空' }]
            })(
              <InputNumber min={1} max={15} placeholder="要删除的IC卡编号,删除后该IC卡将不能打开任何门锁" />
              )}
          </FormItem>

          <FormItem {...tailFormItemLayout}>
            <Button className="button" loading={this.state.main.loading} size="large" type="primary" htmlType="submit">提交</Button>
            <Button className="button" onClick={this.main.props.onCancel}>取消</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}


export const RoomForm = Form.create()(RoomFormClass);
export const InfoForm = Form.create()(InfoFormClass);
export const FloorForm = Form.create()(FloorFormClass);
export const BuildForm = Form.create()(BuildFormClass);
export const QuickForm = Form.create()(QuickFormClass);
export const DelICForm = Form.create()(DelICFormClass);
